<!--  -->
<template>
  <span>
    <template v-if="(/((.*?)[!|?|。|;|.]+([.]{3})?[ ]?)/g).test(word)">
      <a-popover
        transitionName=""
        overlayClassName="lookup-popover"
        placement="bottom"
        :visible="paragraphVisible"
        :destroyTooltipOnHide="true"
        trigger="click"
      >
        <span
          class="pop-content-paragraph js_show_translate"
          @click.stop="paragraphClick($event)"
        >
        <span v-html="word"></span>
          <!-- <template v-if="word.indexOf('\n') !== -1">
            <span v-html="word.replace(/\n/g, '<p class=></p>')"></span>
            <p
              :class="{
                'pppp': /[A-Za-z0-9]/.test(ppp),
                'pppp__null': !/[A-Za-z0-9]/.test(ppp)
                }"
              v-for="ppp in word.split(/\n/)"
              :key="ppp"
            >
              {{ppp}}
            </p>
          </template>
          <template v-else>
            {{word}}
          </template> -->
        </span>
        <div slot="content">
          <div class="lookup-paragraph-content paragraph-pop">
            <div class="title">
              <p>{{ titleText }}</p>
              <img
                class="icon-img"
                @click="translateVoice"
                src="~assets/super-read/voice-round.png"
                alt=""
              />
            </div>
            <button
              v-show="!showTranslate"
              class="translate-btn"
              @click="translateClick"
            >
              查看翻译
            </button>
            <p v-show="showTranslate" class="title-translate">
              {{ translateParagraphText }}
            </p>
          </div>
        </div>
      </a-popover>
    </template>
    <template v-else>
      <span v-html="word"></span>
    </template>
  </span>
</template>

<script>
import $ from "jquery";
import { Popover } from "ant-design-vue";
import { mapState } from "vuex";
import { sha256 } from 'js-sha256'
export default {
  name: "paragraphTranslate",
  components: {
    APopover: Popover,
  },
  data() {
    return {
      audio: {},
      translateParagraphText: "",
      titleText: "",
      paragraphIndex: "",
      paragraphVisible: false,
      isPlayVoice: false,
      showTranslate: false,
    };
  },
  props: ["word", "splittranslate", "id", "visible", "curr", "alsoTrue"],
  computed: {
    ...mapState({
      userInfo: (state) => state.userInfo,
    }),
  },
  watch: {
    curr(val) {
      if (val !== this.paragraphIndex) {
        this.paragraphVisible = false;
      }
    },
  },
  methods: {
    paragraphClick(e) {
      let el = $(e.srcElement).hasClass("js_show_translate")
        ? $(e.srcElement)
        : $(e.srcElement).closest(".js_show_translate");
        console.log($(e.sr), '-=-=-=--=')
      this.titleText = el.text();
      let index = $(".js-translate-paragraph .js_show_translate").index(el);
      this.paragraphVisible = true;
      this.paragraphIndex = index;
      this.$emit("currIndex", index);
      this.translateParagraphText = this.splittranslate[index];
    },
    translateVoice() {
      let language = this.userInfo.language === "en" ? "us" : "uk";
      let voice_temp = `${this.id}_${this.paragraphIndex}_${language}`;
      console.log(voice_temp)
      let voice_sha256 = sha256(voice_temp);
      const voice = `https://yxpmaterial.sse100.com/readvoice/${this.id}/`+voice_sha256+'.wav';
      // const voice = `https://yxpmaterial.sse100.com/readtest/${this.id}/`+voice_sha256+'.wav';
      // const voice = `https://yxpmaterial.sse100.com/read/${this.id}_${this.paragraphIndex}_${language}.mp3`;
      this.audio.src = voice;
      this.audio.play();
      this.isPlayVoice = true;
    },
    translateClick() {
      if (!this.isPlayVoice) {
        this.$message.error("先听完读音才能查看翻译哦");
      } else {
        this.showTranslate = true;
      }
    },
  },
  created() {},
  mounted() {
    this.audio = document.getElementById("reverse-audio");
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {
    this.audio.pause();
  },
  destroyed() {},
  activated() {},
};
</script>
<style lang="less">
/* @import url(); 引入公共css类 */
body {
  .lookup-popover {
    .type-none {
      color: #fff;
      & > span {
        display: inline-block;
        padding: 0 20px;
        border-right: 1px solid #3f9687;
        cursor: pointer;
        &:nth-last-child(1) {
          border: none;
        }
      }
    }
    .change-word {
      color: #afafaf;
      background-color: #fff;
      padding: 10px;
    }
    .pop-confirm-btn {
      width: 55px;
      min-width: 55px;
      height: 32px;
      background-color: #3eb29d;
      border: none;
      outline: none;
      border-radius: 6px;
      color: #fff;
      cursor: pointer;
    }
  }
}
.pop-content-paragraph {
  cursor: pointer;
  text-align: left;
  .word__null {
    padding: 10px 0;
  }
}
.paragraph-pop {
  .translate-btn {
    display: block;
    font-size: 14px;
    border: none;
    outline: none;
    width: 120px;
    height: 33px;
    line-height: 33px;
    margin: 0 auto;
    color: #ffffff;
    background: #11a78b;
    border-radius: 6px;
  }
}
</style>
